<template>
<div>
<el-checkbox-group :max="max" v-model="data"  @change="handleValueChange">
    <el-checkbox-button v-for="item in items" :label="item.value" :key="item.key">{{item.value}}</el-checkbox-button>
</el-checkbox-group>
</div>
</template>

<script>
export default {
    created() {
        var self = this;
        if (self.single  <= 1) {
            self.max = 2;
        } else {
            self.max = self.items.length;
        }
    },
    props: {
        items: {
            type: Array,
            default: [{key: "1", value: "男"},
                      {key: "2", value: "女"},
                      {key: "3", value: "其他(指非自然人)"}
                      ]
        },
        single:{
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            data:[],
            cur: '',
            max:1
        }
    },
    methods: {
        handleValueChange(val) {
            var self = this;
            if (self.single <= 1) {
                if (val.length == 0) {
                    self.cur = '';
                    self.data = [];
                } if (val.length == 1) {
                    self.cur == val[0];
                } else if (val.length > 1) {
                    if (self.cur == val[0]) {
                        self.cur = val[1];
                        self.data = [self.cur];
                    } else {
                        self.cur = val[0];
                        self.data = [self.cur];
                    }
                }
                self.$emit("valueChange", self.cur);
            }


            self.$emit("valueChange", val)
        }
    }
}
</script>
<style>
.el-checkbox-button__inner,
.el-checkbox-button__original,
.el-checkbox-button {
    border-left-style: none;
    border-left-color: transparent;
    border-style: none;
    border-width: 0px;
    border-color: transparent;
    background-color:transparent;
    border: none;
}

.el-checkbox-group {
    border-style: none;
    border-width: 0px;
    border-color: transparent;
    background-color:transparent;
    border: none; 
}

.el-checkbox-button {
    padding-right: 15px;
}
</style>